<div class="bill-container">
    <!--标题-->
    <div class="bill-title">
        <h1>xxx销售出货单</h1>
    </div>
    <div class="bill-info" style="">
        <div class="bill-info-item">客户:<%= order.cid_name %></div>
        <div class="bill-info-item" >日期:<%= order.cid_name %></div>
        <div class="bill-info-item">单号:<%= order.sn %></div>
        <div class="bill-info-item">页码:<%= order.cid_name %></div>
        <div class="bill-info-item">联系人:<%= order.contact_name %></div>
        <div class="bill-info-item">车牌:<%= order.car_license %></div>
        <div class="bill-info-item">送货地址:<%= order.park_address %></div>
    </div>

    <div class="bill-finance-info">
        <div class="item">货物价值:1351</div>
        <div class="item">货物价值:1351</div>
        <div class="item">货物价值:1351</div>
        <div class="item">货物价值:1351</div>
        <div class="item">货物价值:1351</div>
        <div class="item">货物价值:1351</div>
    </div>
    <hr>
    <div class="bill-good-table">
        <table>
            <tr>
                <td>商品编号</td>
                <td>名称</td>
                <td>规格</td>
                <td>单价</td>
                <td>销售数量</td>
                <td>金额</td>
            </tr>
            <tr>
                <td>26</td>
                <td>蛇皮怪</td>
                <td>71只装</td>
                <td>3.00</td>
                <td>55</td>
                <td>165.00</td>
            </tr>
            <tr>
                <td>26</td>
                <td>蛇皮怪</td>
                <td>71只装</td>
                <td>3.00</td>
                <td>55</td>
                <td>165.00</td>
            </tr>
            <tr>
                <td>26</td>
                <td>蛇皮怪</td>
                <td>71只装</td>
                <td>3.00</td>
                <td>55</td>
                <td>165.00</td>
            </tr>
            <tr>
                <td>26</td>
                <td>蛇皮怪</td>
                <td>71只装</td>
                <td>3.00</td>
                <td>55</td>
                <td>165.00</td>
            </tr>
            <tr>
                <td>26</td>
                <td>蛇皮怪</td>
                <td>71只装</td>
                <td>3.00</td>
                <td>55</td>
                <td>165.00</td>
            </tr>
            <tr>
                <td>26</td>
                <td>蛇皮怪</td>
                <td>71只装</td>
                <td>3.00</td>
                <td>55</td>
                <td>165.00</td>
            </tr>
            <tr>
                <td>26</td>
                <td>蛇皮怪</td>
                <td>71只装</td>
                <td>3.00</td>
                <td>55</td>
                <td>165.00</td>
            </tr>
            <tr>
                <td>26</td>
                <td>蛇皮怪</td>
                <td>71只装</td>
                <td>3.00</td>
                <td>55</td>
                <td>165.00</td>
            </tr>
            <tr>
                <td>26</td>
                <td>蛇皮怪</td>
                <td>71只装</td>
                <td>3.00</td>
                <td>55</td>
                <td>165.00</td>
            </tr>
        </table>
    </div>
    <div class="bill-footer">
        <span>经办人：</span>
        <span>注：结余为负代表客户欠商家，为正代表商家欠客户</span>
    </div>
</div>

<style>
    .bill-container{width: 200mm;min-height:80mm;border: 1px solid black;font-size: small;position: relative}
    .bill-title{text-align: center}
    .bill-title h1{margin: 2mm 0}

    .bill-info{text-align: left;padding-left: 10mm;}
    .bill-info-item{width: 60mm;display: inline-block ;white-space: pre-wrap;word-break:break-all;vertical-align: top}

    .bill-finance-info{text-align: center}
    .bill-finance-info .item{display: inline-block;width: 30mm;}
    .bill-good-table table{margin: 0 auto}
    .bill-good-table tr{ border-bottom: 1px solid gainsboro;text-align: center}
    .bill-good-table td{ width: 28mm;border-bottom: 2px solid grey;font-size: small}

    .bill-footer{position:absolute;left: 5mm;bottom:1mm}
</style>
<style>

</style>